<template>
	<view class='cbody'>
		<view class="hearder">
			
		</view>
		<view class="personout">
			<view class="personcard">
				<image src="../../../static/uview/common/位图.png" mode="widthFix" style="width:176upx;"></image>
				<br>
				<view class="qname">
					虚拟世
				</view>
				<view class="qflag">
					只有努力过的人，才知道...
				</view>
				<view class="functionList">
					<view @click="goTo_shoppingOrder">
						<image src="../../../static/uview/common/商%20城%20(2).png" mode="widthFix" style="width: 95upx;"></image>
						<br/>
						<span>
							商城订单
						</span>
					</view>
					<view @click="goTo_repairReport">
						<image src="../../../static/uview/common/商%20城%20(2).png" mode="widthFix" style="width: 95upx;"></image>
						<br/>
						保修记录
					</view>
					<view @click="goTo_scanningRecord">
						<image src="../../../static/uview/common/商%20城%20(2).png" mode="widthFix" style="width: 95upx;"></image>
						<br/>
						代扫记录
					</view>
				</view>
			</view>
		</view>
		<view style="padding:0 50upx;">
			<image src="../../../static/uview/common/Personal%20Center.png" mode="widthFix" style="margin:30upx 0;width:248upx;"></image>
		</view>
		<view class="itemlist">
			<u-row>
				<u-col :span="2" style="text-align: center;">
					<image src="../../../static/uview/common/认证.png" mode="widthFix" style="width:42upx;margin:39upx"></image>
				</u-col>
				<u-col :span="10">
					<view style="display: flex;flex-direction:column;justify-content: center;height: 111upx;">
						<span class="ti">个人认证</span>
						<span class="de">
							修改你的个人资料设置
						</span>
					</view>
				</u-col>
			</u-row>
		</view>
		
		<!-- <view class="itemlist">
			<u-row>
				<u-col :span="2" style="text-align: center;">
					<image src="../../../static/uview/common/登录页面-退出登录.png" mode="widthFix" style="width:42upx;margin:39upx"></image>
				</u-col>
				<u-col :span="10">
					<view style="display: flex;flex-direction:column;justify-content: center;height: 111upx;">
						<span class="ti">退出登录</span>
						<span class="de">
							点击退出登陆账号信息
						</span>
					</view>
				</u-col>
			</u-row>
		</view> -->
		
		<view class="itemlist">
			<u-row>
				<u-col :span="2" style="text-align: center;">
					<image src="../../../static/uview/common/形状%208.png" mode="widthFix" style="width:42upx;margin:39upx"></image>
				</u-col>
				<u-col :span="10">
					<view style="display: flex;flex-direction:column;justify-content: center;height: 111upx;">
						<button open-type="contact" bindcontact="handleContact" class="ti">在线客服</button>
						<span class="de">
							有什么疑问，请点击这里
						</span>
					</view>
				</u-col>
			</u-row>
		</view>
		
		<view class="itemlist" @click="goTo_tombCertification">
			<u-row>
				<u-col :span="2" style="text-align: center;">
					<image src="../../../static/uview/common/墓型管理.png" mode="widthFix" style="width:42upx;margin:39upx"></image>
				</u-col>
				<u-col :span="10">
					<view style="display: flex;flex-direction:column;justify-content: center;height: 111upx;">
						<span class="ti">墓位认证</span>
						<span class="de">
							墓位认证，方便快捷
						</span>
					</view>
				</u-col>
			</u-row>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 自定义导航栏
								title: '待办事项',
								slotRight: true,
								backText: '',
								backIconName: 'nav-back',
								right: false,
								showAction: false,
								rightSlot: false,
								useSlot: false,
								background: {
									background: '#2E95FF'
								},
								isBack: true,
								search: false,
								custom: false,
								isFixed: true,
								keyword: '',
								// #ifdef MP
								slotRight: false,
								// #endif
								// #ifndef MP
								slotRight: true,
								// #endif
								//自定义导航栏结束
			}
		},
		methods: {
			gotabpolice(){
				// uni.switchTab({
				// 	url:'../../tabbar/tab-police/tab-police'
				// })
				this.$u.route({
					type: 'back',
					animationType: 'slide-in-top'
				});
			},
			
			// 跳转 商城订单页面
			goTo_shoppingOrder(){
				this.$u.route({
					url:'/pages/view/shoppingOrder/shoppingOrder'
				})
			},
			
			// 跳转 保修记录页面
			goTo_repairReport(){
				this.$u.route({
					url:'/pages/view/repairReport/repairReport'
				})
			},
			
			// 跳转 代扫记录页面
			goTo_scanningRecord(){
				this.$u.route({
					url:'/pages/view/scanningRecord/scanningRecord'
				})
			},
			
			// 跳转 墓位认证页面
			goTo_tombCertification(){
				this.$u.route({
					url:'/pages/view/tombCertification/tombCertification'
				})
			}
		}
	}
</script>

<style>
	.cbody{
		background-color: #F1F1F4;
		min-height: 100vh;
	}
	.personout{
		position: relative;
		height: 390upx;
	}
	.itemlist{
		width:654upx;
		margin:25upx auto;
		height: 111upx;
		border-radius: 10upx;
		background-color: #fff;
	}
	.itemimg{
		position: absolute;
		left: 50%;
		width: 42upx;
		top: 50%;
		transform: translate(-50%,-50%);
		height:111upx;
	}
	.ti{
		font-size: 32upx;
		color: #515151;
		border: none;
		background-color: transparent;
		display: inline;
		margin: 0;
		padding: 0;
		text-align: left;
		height: 1.4em;
		line-height: 1.4em;
	}
	.ti::after{
		display: none;
	}
	.de{
		font-size: 22upx;
		color: #919191;
		margin-top: 10upx;
	}
	.functionList{
		clear: both;
		width:562upx;
		height: 160upx;
		text-align: center;
		overflow: hidden;
		background-color: #F8F9F9;
		border-radius: 12upx;
		margin:auto;
		margin-top: 30upx;
	}
	.functionList>view{
		width: 33%;
		display: inline-block;
		text-align: center;
	}
	.qflag{
		font-size: 22upx;
		color: #919191;
		margin-top: 10upx;
	}
	.qname{
		font-size: 36upx;
		color: #515151;
		margin-top: 25upx;
	}
	.personcard{
		text-align: center;
		position: absolute;
		width: 650upx;
		height: 584upx;
		left:50upx;
		top: -200upx;
		border-radius: 12upx;
		background: url(../../../static/uview/common/圆角矩形%2010.png) no-repeat;
		background-size: 100% 100%;
		padding-top: 64upx;
	}
.hearder{
	width: 100%;
	height: 447upx;
	background: url(../../../static/uview/common/接待中心.png) no-repeat;
	background-size: cover;
	background-position: top center;
	/* clip-path:ellipse(50% 30% at 50% 70%) ; */
	border-bottom-left-radius:35%;
	border-bottom-right-radius:35%;
}
</style>
